<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div id="cont">4</div>
  <div id="cont">5</div>
  <div id="cont">6</div>
  <div class="msg">
    <div class="xbox">
      <h2>二级标题1</h2>
      <h2>二级标题2</h2>
    </div>
    <h2>二级标题3</h2>
    <h2>二级标题4</h2>
  </div>
  <h2>二级标题5</h2>
  <h2>二级标题6</h2>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <input type="text" name="username">
  <input type="text" name="username">
  <input type="text" name="password">
  
</body>
<script>

  // 单个元素节点选择器：
    // 就算有多个元素符合要求，也只选中第一个
    // 如果一个符合要求的元素都没有，返回null

  // var cont = document.getElementById("cont");
  // console.log(cont);
  // cont.style.background = "red";

  // 多个元素节点选择器：
    // 就算一个符合要求的元素都没有，也是返回一个数组
    // 注意：如果选择器返回的是一个数组，操作元素时要提前解析

  // var box = document.getElementsByClassName("box");
  // console.log(box);
  // box[0].style.background = "pink";

  // var span = document.getElementsByTagName("span");
  // console.log(span);

  // var username = document.getElementsByName("username");
  // console.log(username);

  // var h2 = document.getElementsByTagName("h2")
  // console.log(h2);

  // var msg = document.getElementsByClassName("msg")[0];
  // var h2 = msg.getElementsByTagName("h2")
  // console.log(h2);

  // =============

  // 支持常见的css选择器的写法

  // 单个元素选择器
  // var ele = document.querySelector("#cont");
  // var ele = document.querySelector(".box");
  // var ele = document.querySelector("span");
  // var ele = document.querySelector(".msg h2");
  // var ele = document.querySelector(".msg+h2");
  // var ele = document.querySelector(".msg~h2");
  // var ele = document.querySelector(".msg>h2");
  // var ele = document.querySelector("input[name=username]");
  // console.log(ele);
  // 多个元素选择器
  // var elements = document.querySelectorAll("#cont");
  // var elements = document.querySelectorAll(".box");
  // var elements = document.querySelectorAll("span");
  // var elements = document.querySelectorAll(".msg h2");
  // var elements = document.querySelectorAll(".msg>h2");
  // var elements = document.querySelectorAll(".msg+h2");
  // var elements = document.querySelectorAll(".msg~h2");
  // var elements = document.querySelectorAll("#cont, .box, input");
  // console.log(elements);

</script>
</html>